<template>
  <!-- 版本更新说明页 -->
  <div class="login-versionUpdate">
    <a-back-top>
      <div class="ant-back-top-inner">
        <caret-up-outlined />
      </div>
    </a-back-top>
    <a-row type="flex" justify="center" align="top" >
      <a-col :span="6"></a-col>
      <a-col :span="12">
        <div class="version-div" ref="versionDiv">
          <a-row
              type="flex"
              justify="center"
              align="middle"
              v-for="(item, index) in versions"
              :key="'version' + index"
              :id="'version' + index">
            <a-col :span="22">
              <a-row class="version-title">{{item.version}}</a-row>
              <a-row class="version-date">{{item.date}}</a-row>
              <a-row class="version-des" v-if="item.describe" type="flex" justify="left" align="middle">
                <fire-two-tone class="icon-fire-outlined" v-for="index in 3" :key="index" two-tone-color="#F87A30"/>
                <span class="version-describe">{{item.describe}}</span>
                <fire-two-tone class="icon-fire-outlined" v-for="index in 3" :key="index" two-tone-color="#F87A30"/>
              </a-row>
              <a-row class="version-commits" >
                <a-col :span="24">
                  <a-row
                      v-for="(commit, index2) in item.commits"
                      :key="'version' + index + index2"
                      type="flex"
                      justify="left"
                      align="top"
                      class="commit-row"
                      style="text-align: left;white-space:break-word;"
                        >
                    <a-col style="width:20px;">
                      <bug-filled v-if="commit.type === 'fix'" class="icon-commit icon-bug-outlined"/>
                      <star-filled v-if="commit.type === 'feat'" class="icon-commit icon-star-outlined"/>
                    </a-col>
                    <a-col style="width: calc(100% - 20px);">
                      {{ commit.content }}
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </div>
      </a-col>
      <a-col :span="2"/>
      <a-col :span="2" class="version-anchor">
        <a-anchor :affix="this.$route.path.startsWith('/login') ? true : false">
          <a-anchor-link :href="'#'+'version'+index" :title="'v' + item.version" v-for="(item, index) in versions" :key="'ancher-link-' + index"/>
        </a-anchor>
      </a-col>
      <a-col :span="2"/>
    </a-row>
  </div>
</template>

<script>
  import { BugFilled, StarFilled, CaretUpOutlined, FireTwoTone } from '@ant-design/icons-vue'
  import { ref, onMounted } from 'vue'
  import versions from '@/config/update'
  export default {
    name: 'VersionUpdate',
    data() {
      return{
        versions
      }
    },
    components:{
      BugFilled,
      StarFilled,
      CaretUpOutlined,
      FireTwoTone
    },
    setup () {
    }
  }
</script>

<style lang="less" scoped>
  .login-versionUpdate{
    height: 100%;
    overflow-y: auto;
  }
  .ant-back-top-inner {
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: #1088e9;
    color: #ffffff;
    text-align: center;
    font-size: 20px;
  }
  .version-div{
    padding: 30px 0;
    .version-title{
      margin-top: 50px;
      color: #000000d9;
      font-weight: 900;
      font-size: 24px;
      font-family: Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji",sans-serif;
    }
    .version-date{
      background: #F2F4F5;
      color: #000000d9;
      font-size: 14px;
      font-weight: 600;
      display: table;
      padding: 5px 6px;
      border-radius: 4px;
      margin-top: 10px;
      margin-bottom: 20px;
    }
    .version-des{
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 15px;
      font-family: Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji",sans-serif;
      .icon-fire-outlined{
        font-size: 18px;
      }
      .version-describe{
        margin: 0px 5px;
      }
    }
    .commit-row{
      margin-bottom: 3px;
      .icon-commit{
        margin-right: 5px;
      }
      .icon-bug-outlined{
        color: #F2573A;
      }
      .icon-star-outlined{
        color: rgb(252, 229, 38);
      }
    }
  }
  .version-anchor {
    padding-top: 100px;
    height: 100%;
    width: 100%;
    :deep(.ant-anchor-ink-ball) {
      background: rgb(0, 179, 167);
      border-color: rgb(0, 179, 167);
    }
    .ant-anchor-link {
      :deep(.ant-anchor-link-title) {
        font-size: 18px;
        font-weight: 600;
        font-family: Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji",sans-serif;
      }
      :deep(.ant-anchor-link-title-active) {
        font-weight: 900;
        font-size: 20px;
        color: rgb(0, 179, 167);

      }
    }
  }
</style>
